<template>
    <div class='footer'>
        <div class="footer-bd">
            <div class="map-links">
                <dl v-for="(dl,index) in dls" :key="index">
                    <dt>{{dl.title}}</dt>
                    <dd>{{dl.desc1}}</dd>
                    <dd>
                       {{dl.desc2}}
                    </dd>
                </dl>
            </div>
            <!-- <div class='friends-links'>
                <div class='friends'></div>
            </div> -->
        </div>
    </div>

</template>
<script>
export default {
    name:'Footer',
    data() {
        return {
            dls:[
                {title:'新手指南',desc1:'新手指南',desc2:'挑选服务'},
                {title:'我是商家',desc1:'订购服务',desc2:'使用服务'},
                {title:'我是服务商',desc1:'成为服务商',desc2:'管理服务'},
                {title:'交易保障',desc1:'服务期限',desc2:'服务取消'},
               
            ]
        }
    },
}
</script>
<style scoped>
    .footer{
        width: 100%;
        margin: 0 auto;
        color: #fff;
    }
    .footer-bd{
        margin: 0 auto;
    }
    .map-links{
        padding: 45px 70px 20px 70px;
        display: flex;
        background: #1a1a1a;
    }
    .map-links dl{
        width: 25%;
    }
    dt{
        font-size: 18px;
        padding-bottom: 20px;
    }
    dd{
        color: #ccc;
        font-size: 14px;
        margin-bottom:10px;
        font-family: HiraginoSansGB-W3;
        cursor: pointer;
        /* text-decoration: none; */
    }
    dd:hover{
        color: #28a3ef;
    }
    .friends-links{
        margin: 0 auto;
        padding: 23px 20px 10px 20px;
        background-color: #283240;
    }
    .friends{
        margin: 0 auto;
        height: 100px;
    }
</style>